<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>pagination</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 14px;
            -webkit-user-select: none;
        }

        input {
            display: block;
            outline: none;
        }

        ul, li {
            list-style: none;
        }

        span {
            display: block;
        }

        .box {
            margin: 10px auto;
            padding: 10px;
            width: 600px;
            border: 1px solid #2B93D2;
            overflow: hidden;

            border-radius: 10px;
            box-shadow: 3px 3px 10px 0 #ccc;
        }

        .box h2 {
            height: 35px;
            background: #2B93D2;
            overflow: hidden;
        }

        .box h2 span {
            float: left;
            width: 200px;
            height: 35px;
            line-height: 35px;
            text-align: center;
        }

        .box .dataList {
            height: 300px;
        }

        .box .dataList li {
            height: 30px;
            cursor: pointer;
            overflow: hidden;
        }

        /*使用CSS3实现奇数行和偶数行变颜色*/
        .box .dataList li:nth-child(even) {
            background: #ccc;
        }

        .box .dataList li:hover {
            background: #98E0E6;
        }

        .box .dataList li:active {
            background: #6D84B4;
        }

        .box .dataList li span {
            float: left;
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

        .box .page {
            margin-top: 10px;
            float: right;
            overflow: hidden;
        }

        .box .page div, .box .page ul, .box .page input {
            float: left;
        }

        .box .page div {
            margin-left: 5px;
            width: 45px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            cursor: pointer;
            border: 1px solid #FF5500;
        }

        .box .page ul {
            margin-left: 5px;
            overflow: hidden;
        }

        .box .page ul li {
            float: left;
            margin-left: 5px;
            width: 20px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            cursor: pointer;
            border: 1px solid #FF5500;
        }

        .box .page ul li.bg {
            background: #2B93D2;
        }

        .box .page input {
            margin-left: 5px;
            width: 40px;
            height: 18px;
            text-align: center;
            border: 1px solid #FF5500;
        }
    </style>

</head>
<body>
<div class="box">
    <!--分页表头-->
    <h2><span>学号</span><span>性别</span><span>分数</span></h2>

    <!--分页列表-->
    <ul class="dataList" id="dataList">

    </ul>

    <!--分页按钮-->
    <div class="page" id="page">
        <div class="fir">首页</div>
        <div class="pre">上一页</div>
        <ul id="pageList">
            <!--<li class="bg"></li>-->
        </ul>
        <div class="next">下一页</div>
        <div class="last">尾页</div>
        <input type="text" class="goTo" id="inputTo"/>
    </div>
</div>

<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
    var ajax = function (url, data, successFn, errFn) {
        data = (data === '' || data === null || typeof data === 'undefined') ? {'date': new Date().getTime()} : data;
        $.ajax({
            type: 'get',
            url: url,
            data: data,
            dataType: 'json',
            //jsonp: 'jsonpCallback',
            success: function (d) {
                successFn(d);
            },
            error: function (e) {
                errFn(e);
            }
        })
    };

    var page = 1, count = 10, totalPage = 0;

    ajax("/getInfo", {page: page, count: count}, function (data) {
        totalPage = data.totalPage;
        getPage(data);
        bindPage(data);
        changePage(page)
    }, function () {
        alert("数据获取失败");
    });

    function getPage(data) {
        var str = "";
        $.each(data.list, function (k, v) {
            str += '<li data-num="' + v.num + '">';
            str += '<span>' + v.num + '</span>';
            str += '<span>' + (v.sex === 1 ? "男" : "女") + '</span>';
            str += '<span>' + v.score + '</span>';
            str += '</li>'
        });
        $('#dataList').empty().append(str)
    }
    function bindPage(data) {
        var str = "";
        for (var i = 1; i <= data.totalPage; i++) {
            str += '<li>' + i + '</li>';
        }
        $("#pageList").empty().append(str);
    }
    function changePage(page) {
        $('#pageList li').eq(page - 1).addClass("bg").siblings().removeClass('bg');
    }

    $('#page').on('click', function (e) {
        var tar = e.target;
        if (tar.tagName.toLowerCase() === 'li') {
            page = $(tar).text();
            console.log(page===totalPage)
            getInfoModel();
            return
        }
        //->fir:首页 pre:上一页 next:下一页 last:尾页
        if (tar.className === "fir") {
            page = 1;
            getInfoModel();
            return
        }
        if (tar.className === "last") {
            page = totalPage;
            getInfoModel();
            return
        }
        if (tar.className === "pre") {
            if (page === 1) {
                return
            }
            page--;
            getInfoModel();
            return
        }
        if (tar.className === "next") {
            console.log(page===totalPage)
            if (page === totalPage) {
                return
            }

            page++;
            getInfoModel();
            return
        }

    });
    $('#inputTo').on('keyup', function (e) {
        var val = $(this).val();
        if (e.keyCode === 13) {
            if (!isNaN(val)) {
                if (val < 1) {
                    page = 1;
                    $(this).val(1)
                } else if (val > totalPage) {
                    page = totalPage;
                    $(this).val(totalPage)
                } else {
                    page = val;
                }
                getInfoModel();
            } else {
                alert('请输入数字')
            }
        }
    });

    function getInfoModel() {
        ajax("/getInfo", {page: page, count: count}, function (data) {
            getPage(data);
            changePage(page)
        }, function () {
            alert("数据获取失败");
        });
    }
</script>
</body>
</html>